<template>
	<view class="">

		<view class="table-container" style="height: 400px;">
			<uni-table stripe type="selection" emptyText="暂无更多数据">
				<uni-tr class="table-head">
					<uni-th align="center" width="30">ID</uni-th>
					<uni-th>昵称</uni-th>
					<uni-th>权益等级</uni-th>
					<uni-th>注册时间</uni-th>
					<uni-th>团队规模</uni-th>
					<uni-th>团队业绩</uni-th>
					<uni-th>个人业绩</uni-th>
					<uni-th>
						<view style="display: flex;align-items: center;gap: 10px;">
							<view class="gl-link gl-link-base" @click="()=>{this.page=1;this.refresh();}">刷新
							</view>
						</view>
					</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tmpData" :key="index">
					<uni-td>{{item.sub_staff.id}}</uni-td>
					<uni-td>
						<view style="display: flex;align-items: center;gap: 10px;" @click="eventNav(item.sub_staff.id)">
							<image :src="sConf.cos + item.sub_staff.face" mode="scaleToFill"
								style="width: 40px;height: 40px;border-radius: 50% 50%;"></image>
							<text>{{item.sub_staff.nicename}}</text>
						</view>
					</uni-td>
					<uni-td>
						<view style="display: flex;align-items: center;gap: 10px;">
							<image :src="sConf.cos + item.sub_level.icon" mode="scaleToFill"
								style="width: 40px;height: 40px;border-radius: 50% 50%;"></image>
							<text>{{item.sub_level.name}}</text>
						</view>
					</uni-td>
					<uni-td>{{item.sub_staff.created}}</uni-td>
					<uni-td>{{item.sub_count}}</uni-td>
					<uni-td>暂未开放</uni-td>
					<uni-td>暂未开放</uni-td>
				</uni-tr>

			</uni-table>
		</view>
		<view class="gl-footer">
			<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
				@change="refresh" />
		</view>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	export default {
		data() {
			return {
				count: 0, // 记录数
				size: 50, // 页大小
				page: 1, // 当前页	
				title: '团队成员树',
				sConf: getApp().globalData,
				tmpData: [],
				pidData: [],
				curSid: null
			}
		},
		methods: {
			open(e) {
				this.curSid = e
				this.page = 1
				this.refresh()
			},
			async refresh() {
				// await this.loadParentData().then(res => {
				// 	console.log('加载父级', res);
				// 	this.pidData = res.resmsg
				// })
				await this.loadDefData().then(res => {
					console.log('加载成员树', res);
					this.tmpData = res.resmsg
					this.count = res.count;
					this.size = res.size;
				})
			},
			eventNav(e) {
				console.log('eventNav', e);
				this.$emit('cursid', e)
			},
			loadParentData() {
				let host = this.sConf.host + '/admin/treeStaff/'
				let token = this.sConf.auth.token
				let data = {
					'page': this.page,
					'size': this.size,
					'sid': this.curSid,
				};
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '加载中'
					})
					psMethod.authenticatorGetSync(host, token, data).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					}).finally(() => {
						uni.hideLoading()
					})
				})
			},
			loadDefData() {
				let host = this.sConf.host + '/admin/treeStaff/'
				let token = this.sConf.auth.token
				let data = {
					'page': this.page,
					'size': this.size,
					'parent': this.curSid,
				};
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '加载中'
					})
					psMethod.authenticatorGetSync(host, token, data).then(res => {
						resolve(res)
					}).catch(err => {
						reject(err)
					}).finally(() => {
						uni.hideLoading()
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 表格垂直滚动 */
	.table-container {
		/* height: 400px; */
		overflow-y: auto;

		::v-deep .uni-table .table-head th {
			font-weight: bold;
			z-index: 2;
			background-color: #fff;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
		}

		::v-deep .uni-table-scroll {
			overflow: visible;
		}
	}
</style>